<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>
            天气案例_属性检测
        </title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <!-- <button @click='changeWeather'>切换天气</button> -->
            <button @click='isHot = !isHot'>切换天气</button> <!-- 用计算属性代替方法, 只能写一些简单的语句， 复杂的语句还要放在methods中去。 -->
        </div>
        
    </body> 
    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data:{ 
                isHot:true
            },
            methods:{
                // changeWeather(){ // 可以直接放在按钮的点击事件中。
                //     this.isHot = !this.isHot
                // }
                
            },
            watch:{
                isHot:{// 原始写法
                    immediate:true, // 立即执行
                    handler(newV, oldV){
                        console.log("原始",newV, oldV)
                    },
                },
                isHot(newValue, oldValue){// 简写
                    console.log("simple",newValue, oldValue)
                },
                isHot(newValue, oldValue){ //上面的被覆盖了
                    console.log("simple2",newValue, oldValue)
                },
                info(newValue, oldValue){
                    console.log("info_simple",newValue, oldValue)
                }
            },
            computed:{
                info(){
                    return this.isHot ? "hot":"cold"
                }
            }
        })

        vm.$watch("isHot", (newV, oldV)=>{ // 监听属性变化
            console.log("vm",newV, oldV)
        })
    </script>
</html>